<template>
  <n-config-provider :breakpoints="breakpoints" :date-locale="dateZhCN" :locale="zhCN"
  :theme="theme === 'dark' ? darkTheme : lightTheme"
  :theme-overrides="theme === 'dark' ? darkThemeOverrides : lightThemeOverrides">
    <n-theme-editor>
      <app-provider>
        <router-view/>
      </app-provider>
    </n-theme-editor>
  </n-config-provider>
</template>

<script setup>
import { computed } from 'vue'
import { zhCN, dateZhCN, darkTheme, lightTheme } from 'naive-ui'
import { useMainStore } from '@/store'
import { storeToRefs } from 'pinia'
import AppProvider from '@c/Application/index.vue'

const breakpoints = { xs: 0, s: 640, m: 1024, l: 1280, xl: 1536, xxl: 1920, xxxl: 2560 }
const { theme } = storeToRefs(useMainStore())

const themeOverrides = {
  common: {
    primaryColor: '#0665d0',
    primaryColorHover: '#0d7cf9',
    primaryColorPressed: '#0d7cf9',
    successColor: '#18BE6A',
    successColorHover: '#1ec973',
    successColorPressed: '#1ec973',
    warningColor: '#FA8C16',
    warningColorHover: '#fea13e',
    warningColorPressed: '#fea13e',
    errorColor: '#FF4D4F',
    errorColorHover: '#f96062',
    errorColorPressed: '#f96062',
    fontSize: '14.4px',
    fontSizeMedium: '14.4px',
    fontSizeMini: '12.24px',
    fontSizeTiny: '12.24px',
  },
  Layout: {
    siderToggleButtonColor: '#0665d0',
  },
  Menu: {
    itemHeight: '44px',
    fontSize: '14px',
    itemTextColor: '#23262E99',
  },
  Card: {
    paddingMedium: '24px',
    paddingLarge: '32px',
    titleFontSizeMedium: '16px',
    titleTextColor: '#000000E6',
    borderRadius: '8px',
  },
  Statistic: {
    labelFontSize: '16px',
  },
  Tag: {
    fontSizeLarge: '16px',
    heightMedium: '32px',
    heightLarge: '40px',
  },
  Button: {
    colorQuaternaryHover: '#F7F9FF',
    colorQuaternaryPressed: '#F7F9FF',
    paddingLarge: '0 24px',
    fontSizeLarge: '16px',
    heightMedium: '32px',
    textColorTertiary: '#96A0B1',
    paddingMedium: '0 18px',
    borderRadiusMedium: '6px',
    borderRadiusLarge: '6px',
  },
  Badge: {
    colorInfo: '#0665d0',
    colorSuccess: '#18BE6A',
    colorError: '#FF4D4F',
    colorWarning: '#FA8C16',
  },
  Typography: {
    headerFontSize2: '20px',
    headerMargin1: '28px 0 24px 0',
    headerMargin2: '28px 0 24px 0',
  },
  Dropdown: {
    borderRadius: '8px',
  },
  Steps: {
    headerTextColorProcess: '#0665d0',
    descriptionTextColorProcess: '#94a3b8',
  },
  DataTable: {
    fontSizeLarge: '16px',
    paginationMargin: '16px 0 0'
  },
  Dialog: {
    padding: '32px',
    contentMargin: '24px 0 8px',
    closeMargin: '32px 32px 0 0',
    borderRadius: '8px',
    closeColorPressed: '#00000000',
    closeColorHover: '#00000000',
  },
  Form: {
    labelFontSizeLeftLarge: '16px',
  },
  Thing: {
    fontSize: '14px',
  },
  Alert: {
    closeColorPressedInfo: '#00000000',
    closeColorHoverInfo: '#00000000',
    closeIconColorHoverInfo: '#94a3b8',
    closeIconColorPressedInfo: '#94a3b8',
  },
  Drawer: {
    closeColorHover: '#00000000',
    closeIconColorHover: '#94a3b8'
  },
  Notification: {
    closeColorHover: '#00000000',
    closeIconColorHover: '#94a3b8',
    width: '420px'
  }
}

const lightThemeOverrides = computed(() => {
  return {
    ...themeOverrides,
    common: {
      ...themeOverrides.common,
      placeholderColor: '#0000003D',
      dividerColor: '#E7EBEF',
      borderColor: '#E0E1E4',
      closeColor: '#0000003D',
      closeColorHover: '#7A7A7A',
      textColor1: '#566a7f',
      textColor2: '#64748b',
      bodyColor: '#F4F5FB',
    },
    Layout: {
      ...themeOverrides.Layout,
      siderColor: '#ffffff',
    },
    Form: {
      ...themeOverrides.Form,
      labelTextColor: '#566a7f',
      feedbackTextColor: '#94a3b8',
    },
    Input: {
      textColor: '#64748b',
      suffixTextColor: '#64748b',
      borderRadius: '6px',
      paddingLarge: '0 14px',
    },
    Dialog: {
      ...themeOverrides.Dialog,
      titleTextColor: '#566a7f',
      textColor: '#96A0B1',
      closeIconColorHover: '#94a3b8',
      closeIconColorPressed: '#94a3b8',
    },
    DataTable: {
      thColor: '#F8F8FBFF',
      thTextColor: '#00000099',
      tdTextColor: '#00000099',
      borderColor: '#E7EBEFFF',
      ...themeOverrides.DataTable,
    },
    Radio: {
      textColor: '#64748b',
    },
    Thing: {
      ...themeOverrides.Thing,
      titleTextColor: '#566a7f',
      textColor: '#64748b',
    },
  }
})

const darkThemeOverrides = computed(() => {
  return {
    ...themeOverrides,
    common: {
      ...themeOverrides.common,
      baseColor: '#ffffffe6',
    },
    Button: {
      ...themeOverrides.Button,
      colorQuaternaryHover: '#3b82f680',
      colorQuaternaryPressed: '#3b82f680',
    },
    Input: {
      borderRadius: '6px',
      paddingLarge: '0 14px',
    },
    Dialog: {
      ...themeOverrides.Dialog,
      closeIconColorHover: '#ffffffe6',
      closeIconColorPressed: '#ffffffe6',
    },
    Switch: {
      iconColor: '#424245',
    },
  }
})
</script>
